<template>
  <div class="exam-container">
    <!-- 主体内容 -->
    <main class="content-wrapper">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>山河大学入学考试</h1>
        <p v-if="examInfo.stageName">{{ examInfo.stageName }} {{ examInfo.gradeName }}入学考试</p>
      </div>
      
      <!-- 考试信息 -->
      <div class="exam-info">
        <div class="info-item">
          <span class="info-label">总题数：</span>
          <span class="info-value">10题</span>
        </div>
        <div class="info-item">
          <span class="info-label">总分：</span>
          <span class="info-value">100分</span>
        </div>
        <div class="info-item">
          <span class="info-label">每题分值：</span>
          <span class="info-value">10分</span>
        </div>
        <div class="info-item">
          <span class="info-label">及格分数：</span>
          <span class="info-value">60分（6题正确）</span>
        </div>
        <div class="info-item">
          <span class="info-label">考试剩余时间：</span>
          <div class="countdown" :class="{ danger: remainingTime < 60 }">
           {{ formatTime(remainingTime) }}
    </div>
        </div>
      </div>
      
      <!-- 考试内容 -->
      <div v-if="!isExamCompleted" class="exam-content">
        <div v-for="(question, index) in examQuestions" :key="index" class="question-item">
          <div class="question-header">
            <span class="question-number">{{ index + 1 }}.</span>
            <span class="question-text">{{ question.question }}</span>
          </div>
          
          <div class="question-options">
            <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option-item">
              <input type="radio" 
                     :id="`q${index}-opt${optIndex}`"
                     :name="`question-${index}`"
                     :value="optIndex"
                     v-model="userAnswers[index]">
              <label :for="`q${index}-opt${optIndex}`">
                {{ String.fromCharCode(65 + optIndex) }}. {{ option }}
              </label>
            </div>
          </div>
        </div>
        
        <!-- 提交按钮 -->
        <div class="submit-action">
          <button class="submit-btn" @click="submitExam">
            提交答卷
          </button>
        </div>
      </div>
      
      <!-- 考试结果 -->
      <div v-else class="exam-result">
        <div v-if="isPassed" class="result-passed">
          <div class="result-icon">🎉🎉🎉</div>
          <h2>恭喜您考试通过！</h2>
          <p class="result-message">您答对了 {{ correctAnswersCount }} 道题，成绩优秀！</p>
          <button class="exam-btn" @click="goBack">返回招生信息页</button>
          <button class="exam-btn" @click="studentRegister">办理入学</button>
        </div>
        
        <div v-else class="result-failed">
          <div class="result-icon">😔</div>
          <h2>很遗憾，您考试成绩不理想</h2>
          <p class="result-message">您答对了 {{ correctAnswersCount }} 道题，未达到入学要求。</p>
          <div class="options">
            <button class="exam-btn" @click="retryExam">重新考试</button>
            <button class="exam-btn" @click="demoteExam">降级考试</button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';

// 接收父组件传递的参数
const props = defineProps({
  examParams: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['changeComponent', 'updateExamStatus']);

// 考试状态
const isExamCompleted = ref(false);
const isPassed = ref(false);
const correctAnswersCount = ref(0);

// 考试信息
const examInfo = ref({
  stageName: '',
  gradeName: ''
});

// 阶段对应的时间（单位：分钟 → 转换为秒）
const stageTimeMap = { 
  primary: 20 * 60,   // 小学：20分钟
  junior: 30 * 60,    // 初中：30分钟
  senior: 60 * 60,    // 高中：60分钟
  college: 150 * 60   // 大学：150分钟
};

// 2. 倒计时相关
const totalTime = ref(0); // 总时长（秒），根据阶段动态设置
const remainingTime = ref(0); // 剩余时间（秒）
let countdownTimer = null; // 定时器实例

// 格式化时间：秒 → MM:SS
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
// 删除这段无用代码
// 确认难度选择（开始计时）
const confirmDifficulty = () => {
  if (!selectedStage.value) return;

  // 设置总时长并开始倒计时
  totalTime.value = stageTimeMap[selectedStage.value];
  remainingTime.value = totalTime.value;
  isDifficultySelected.value = true;

  // 启动定时器
  startCountdown();
};

// 题库数据 - 定义在函数外部，确保能被访问到
const questionBanks = {
  primary: [
    { question: '1+1等于多少？', options: ['1', '2', '3', '4'], answer: 1 },
    { question: '太阳从哪边升起？', options: ['东边', '西边', '南边', '北边'], answer: 0 },
    { question: '一周有几天？', options: ['5天', '6天', '7天', '8天'], answer: 2 },
    { question: '中国的首都是哪里？', options: ['上海', '北京', '广州', '深圳'], answer: 1 },
    { question: '下列哪种动物会游泳？', options: ['猫', '狗', '兔子', '鸡'], answer: 1 },
    { question: '2+3等于多少？', options: ['3', '4', '5', '6'], answer: 2 },
    { question: '苹果是什么颜色的？', options: ['红色', '蓝色', '绿色', '都有可能'], answer: 3 },
    { question: '一年有几个季节？', options: ['3个', '4个', '5个', '6个'], answer: 1 },
    { question: '下列哪个是水果？', options: ['苹果', '白菜', '萝卜', '土豆'], answer: 0 },
    { question: '天空是什么颜色的？', options: ['红色', '蓝色', '绿色', '黄色'], answer: 1 }
  ],
  junior: [
    { question: '中国的国旗是什么？', options: ['五星红旗', '青天白日满地红', '三色旗', '星条旗'], answer: 0 },
    { question: '水的化学式是什么？', options: ['H2O', 'CO2', 'O2', 'NaCl'], answer: 0 },
    { question: '下列哪个是唐代诗人？', options: ['李白', '苏轼', '李清照', '辛弃疾'], answer: 0 },
    { question: '地球是什么形状的？', options: ['圆形', '方形', '椭圆形', '三角形'], answer: 2 },
    { question: '100的平方根是多少？', options: ['8', '9', '10', '11'], answer: 2 },
    { question: '下列哪个是中国的传统节日？', options: ['春节', '圣诞节', '万圣节', '情人节'], answer: 0 },
    { question: '声音在什么介质中传播最快？', options: ['空气', '水', '固体', '真空'], answer: 2 },
    { question: '《西游记》的作者是谁？', options: ['吴承恩', '罗贯中', '曹雪芹', '施耐庵'], answer: 0 },
    { question: '世界上最大的海洋是？', options: ['大西洋', '太平洋', '印度洋', '北冰洋'], answer: 1 },
    { question: '下列哪个是哺乳动物？', options: ['鲸鱼', '鲨鱼', '鳄鱼', '乌龟'], answer: 0 }
  ],
  senior: [
    { question: '牛顿第一定律又称为？', options: ['惯性定律', '加速度定律', '作用力与反作用力定律', '能量守恒定律'], answer: 0 },
    { question: '《红楼梦》的作者是谁？', options: ['曹雪芹', '吴承恩', '罗贯中', '施耐庵'], answer: 0 },
    { question: '中国历史上第一个统一的王朝是？', options: ['秦朝', '汉朝', '唐朝', '元朝'], answer: 0 },
    { question: '元素周期表中，H代表什么元素？', options: ['氢', '氦', '锂', '铍'], answer: 0 },
    { question: '下列哪个是中国的四大发明？', options: ['造纸术', '蒸汽机', '电脑', '汽车'], answer: 0 },
    { question: '光合作用的产物主要是什么？', options: ['葡萄糖和氧气', '二氧化碳和水', '淀粉和水', '蛋白质和氧气'], answer: 0 },
    { question: '相对论的提出者是谁？', options: ['爱因斯坦', '牛顿', '居里夫人', '霍金'], answer: 0 },
    { question: '二战结束的时间是？', options: ['1945年', '1939年', '1941年', '1943年'], answer: 0 },
    { question: '下列哪个是计算机编程语言？', options: ['Python', 'Excel', 'PowerPoint', 'Word'], answer: 0 },
    { question: '《资本论》的作者是谁？', options: ['马克思', '恩格斯', '列宁', '斯大林'], answer: 0 }
  ],
  college: [
    { question: '量子力学的奠基人之一是谁？', options: ['普朗克', '爱因斯坦', '牛顿', '居里夫人'], answer: 0 },
    { question: '《国富论》的作者是谁？', options: ['亚当·斯密', '凯恩斯', '马克思', '哈耶克'], answer: 0 },
    { question: 'DNA的结构是什么？', options: ['双螺旋', '单链', '三螺旋', '环状'], answer: 0 },
    { question: '下列哪个是中国古代哲学家？', options: ['孔子', '柏拉图', '亚里士多德', '笛卡尔'], answer: 0 },
    { question: '热力学第二定律的内容是什么？', options: ['熵增原理', '能量守恒', '质量守恒', '动量守恒'], answer: 0 },
    { question: '《共产党宣言》的作者是谁？', options: ['马克思和恩格斯', '列宁', '斯大林', '毛泽东'], answer: 0 },
    { question: '人工智能的英文缩写是什么？', options: ['AI', 'IT', 'IQ', 'ID'], answer: 0 },
    { question: '下列哪个是编程语言的框架？', options: ['Vue.js', 'HTML', 'CSS', 'JavaScript'], answer: 0 },
    { question: '万有引力定律的表达式是什么？', options: ['F=G*(m1*m2)/r²', 'F=ma', 'E=mc²', 'P=mv'], answer: 0 },
    { question: '市场经济的基本特征是什么？', options: ['自由竞争', '计划调节', '政府主导', '按需分配'], answer: 0 }
  ]
};

// 修改后的generateExamQuestions函数，直接接收stage参数
const generateExamQuestions = (stage) => {
  // 获取当前阶段的题目
  const questions = questionBanks[stage] || questionBanks.primary;
  
  // 随机选择10道题
  const shuffled = [...questions].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, 10);
};

// 考试题目
const examQuestions = ref([]);
const userAnswers = ref([]);

// 初始化考试 - 使用props中的参数
const initExam = () => {
  // 获取考试信息
  const stage = props.examParams.stage || 'primary';
  const grade = props.examParams.grade || 'primary-1';
  
  // 设置考试信息
  const stageNames = {
    primary: '小学部',
    junior: '初中部',
    senior: '高中部',
    college: '大学部'
  };
  
  examInfo.value.stageName = stageNames[stage] || '小学部';
  examInfo.value.gradeName = grade.includes('-') ? grade.split('-')[1] + '年级' : '一年级';
  
  // 生成题目
  examQuestions.value = generateExamQuestions(stage);
  
  // 初始化用户答案
  userAnswers.value = new Array(examQuestions.value.length).fill(null);
  
  // 重置考试状态
  isExamCompleted.value = false;
  isPassed.value = false;
  correctAnswersCount.value = 0;
  
  // 设置考试时间并启动倒计时
  totalTime.value = stageTimeMap[stage] || stageTimeMap.primary; // 使用当前阶段对应的时间，如果没有则使用小学阶段时间
  remainingTime.value = totalTime.value; // 初始化剩余时间
  startCountdown(); // 启动倒计时
};

// 启动倒计时
const startCountdown = () => {
  // 清除可能存在的旧定时器
  if (countdownTimer) clearInterval(countdownTimer);

  countdownTimer = setInterval(() => {
    if (remainingTime.value > 0 && !isExamCompleted.value) {
      remainingTime.value--;
    } else if (remainingTime.value === 0 && !isExamCompleted.value) {
      // 时间到自动提交
      autoSubmit();
    }
  }, 1000);
};

// 自动提交（时间到）
const autoSubmit = () => {
  clearInterval(countdownTimer);
  submitExam();
  alert('考试时间已到，自动提交试卷');
};

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(countdownTimer);
});


// 提交考试 - 通过事件通知父组件
const submitExam = () => {
  // 1. 真实计算考试结果（正确答案数量）
  let correctCount = 0;
  examQuestions.value.forEach((q, index) => {
    if (userAnswers.value[index] === q.answer) {
      correctCount++;
    }
  });
  
  // 2. 保存计算结果（用于组件内部展示，如正确题数、是否通过）
  correctAnswersCount.value = correctCount;
  isPassed.value = correctCount >= 6; // 假设6题为及格线
  isExamCompleted.value = true;
  
  // 3. 将真实结果通过事件通知容器页面
  emit('updateExamStatus', isPassed.value); // 传递实际是否通过的结果

    // 4. 添加页面滚动到顶部的功能
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动效果
  });
  
};


// 重新考试 - 直接调用initExam，不使用路由
const retryExam = () => {
  initExam();
};

// 降级考试 - 通过事件通知父组件
const demoteExam = () => {
  const currentStage = props.examParams.stage || 'primary';
  const stageOrder = ['college', 'senior', 'junior', 'primary'];
  const currentIndex = stageOrder.indexOf(currentStage);
  
  let newStage = currentStage;
  if (currentIndex < stageOrder.length - 1) {
    newStage = stageOrder[currentIndex + 1];
  }
  
  emit('changeComponent', {
    target: 'info',
    params: {
      preselectStage: newStage
    }
  });
};

// 返回招生信息页 - 通过事件通知父组件
const goBack = () => {
  emit('changeComponent', { target: 'info' });
};

// 办理入学 - 通过事件通知父组件
const studentRegister = () => {
  emit('changeComponent', {
    target: 'register',
    params: {
      stage: props.examParams.stage,
      grade: props.examParams.grade
    }
  });
};

// 监听props变化，重新初始化考试
watch(() => props.examParams, () => {
  initExam();
}, { immediate: true, deep: true });
</script>

<style scoped>
/* 主容器样式 */
.exam-container {
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  margin: 0 auto;
  padding: 30px 20px;
  width: 100%;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
}

.page-header h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 10px;
  font-weight: 700;
}

.page-header p {
  font-size: 16px;
  color: #7f8c8d;
}

/* 考试信息样式 */
.exam-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.exam-content {
  padding: 20px;
}

.question-item {
  margin: 20px 40px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.option-item input {
  width: 20px;
  height: 20px;
  margin: 5px 20px;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 10px;
}

.info-label {
  font-weight: 600;
  color: #2c3e50;
  margin-right: 5px;
}

.info-value {
  color: #3498db;
}

/* 提交按钮容器样式*/
.submit-action {
  text-align: center;
  margin-top: 30px;
}

/* 提交按钮样式 */
.submit-btn {
  padding: 16px 48px;
  background-color: #2ecc71;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #27ae60;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}

.exam-btn {
  flex: 1;
  padding: 12px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  width: 200px;
  margin-right: 60px;
}

.exam-result {
  margin-top: 30px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

</style>